<!-- 点餐界面 -->
<template>
	<view class="menu-main">
        <view class="headmaindiv">
            <!-- 导航栏 返回按钮 标题 -->
            <u-navbar :title='params.title' height=50 title-color='#fff' title-width=400 back-icon-color='#fff' :background='background' :custom-back='gotoPrevious'></u-navbar>
            <view class="headdiv">
               <view class="headbodytext">
                   <view class='headtitle'>
                       <!-- 这里包一层是为了标题过长问题 -->
                       <view class='textlength'>
                           <text class="bodytext headbodytitle">{{params.title}}</text>
                       </view>
                       <text class="bodytext headbodyscore">{{params.score}}</text>
                   </view>
                   <view>
                        <text class="bodytext headbodydeliveryTime">配送时间{{ params.deliveryTime }}</text>
                        <text class="bodytext">月售{{ params.monthSale }}</text>
                    </view>
                </view>
                <view class="headbodyimg">
                    <image class="img-size" :src="params.icon"></image>
                </view>
            </view>
            <view>
                <!-- 轮播图 -->
                <u-swiper :list="advertisementImgs" interval=8000 border-radius=20 height=400></u-swiper>
            </view>
        </view>
        <view class="header2">
            <view class='optionList'>
                <!-- 循环选项卡 -->
                <view class='optionConten' v-for="(item, index) in items" :key="index" @tap="goto(index)">
                    <!-- 根据当前选项卡位置该表css样式 -->
                    <text :class="[c_index!=index?'option':'optionBig']">{{ item }}</text>
                    <div :class="[c_index!=index?'optionbj':'optionbjBig']"></div>
                </view>
            </view>
            <!-- 根据选项卡显示对应的组件内容 -->
            <view :class="[c_index!=0?'moduleNone':'moduleShow']">
                <Order :datas="params"></Order>
            </view>
            <view :class="[c_index!=1?'moduleNone':'moduleShow']">
                
            </view>
            <view :class="[c_index!=2?'moduleNone':'moduleShow']">
               
            </view>
        </view>
	</view>
</template>

<script>
    import Config from "../../static/business_config.js";
    import Order from "./order.vue"
    
	export default {
		data() {
			return {
                // url接收的参数
                params: {},
                // 导航栏背景设置
				background: {
                    backgroundColor: '#009ff0'
                },
                // 选项卡
                items: ['点餐', '评价', '商家'],
                // 选项卡初始位置
                c_index: 0,
                advertisementImgs: Config.advertisementImg,
			}
		},
        components:{Order},
        onLoad: function (option) {
            // 接收url参数
            this.params = JSON.parse(decodeURIComponent(option.params));
            // console.log(params)
        },
		methods: {
            // 返回上一页
            gotoPrevious(){
                // 使用navigateBack的话当前页面刷新的话就会失效
                // uni.navigateBack();
                uni.navigateTo({
                    url: 'index'
                });
            },
            
            // 点击选项卡的操作
			goto(index){
                // 改变选项卡位置，为了不同的css效果
                this.c_index = index;
               // console.log(index, 1111); 
            }
		}
	}
</script>

<style scoped>
.menu-main {
  width: 750upx;
  /* height: 1000px; */
  /* position: absolute; */
}

.headdiv {
  display: flex;
  flex-direction: row;
  margin: 5px;
  width: 730upx;
  justify-content: center;
  border-style: solid;
  border-width: 1px;
  border-color: #ffffff;
  border-radius: 30upx;
  background-color: rgba(245, 245, 245, 0.5);
}

.headbodytext {
  width: 460upx;
  margin-top: 20px;
}

.headtitle{
    display: flex;
    flex-direction: row;
}

.textlength{
    width: 400upx;
    /*父元素设置超过宽度显示...*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bodytext {
  /* height: 60px; */
  font-size: 27upx;
  color: #808080;
  margin-right: 20upx;
}

.headbodytitle {
  font-size: 35upx;
  font-weight: bold;
  color: black;
}

.img-size {
  margin-top: 20px;
  width: 100upx;
  height: 100upx;
}

/* .header2 {
    background-color: #ffffff;
} */

.optionList {
    height: 50px;
    display: flex;
    margin: 10px 0;
    flex-direction: row;
    justify-content: space-around;
    /* 添加吸顶效果 我看支付宝上这样我就也这样弄了*/
    position: sticky;
    /* #ifdef H5 */
    top: 58px;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    /* 以iphone xr 为例子，微信小程序上面是包含时间和电池信息的，高度为44 */
    top: 94px;
    /* #endif */
    background-color: #ffffff;
    /* 因为遮罩层是10073*/
    z-index: 10072;
}

.optionConten {
    display: flex;
    justify-content: center;
    align-items: center;
}

.optionBig {
    height: 50upx;
    font-size: 35upx;
    font-weight: bold;
}

.option {
    height: 50upx;
    color: #808080;
    font-size: 28upx;
}

.optionbj{
    display:none;
}

.optionbjBig{
    position: absolute;
    top:35px;
    height: 3px;
    width: 30px;
    /* color: #009ff0; */
    border-top-width: 6px;
    border-top-color: #009ff0;
    border-top-style: solid;
}

.sliders {
  width: 720px;
  margin: 0px 15px;
}

.size {
  width: 720px;
  height: 400px;
  border-radius: 20px;
}

.moduleShow {
    display: block;
}

.moduleNone {
    display: none;
}
</style>
